<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 10px red solid;

            /* 
                外边距（margin）
                    -外边距不会影响盒子可见框的大小
                    -但是外边距会影响盒子的位置
                    -一共有四个方向的外边距：
                        margin-top
                            -上外边距，设置一个正值，元素回向下移动
                        margin-right
                            -默认情况下设置margin-right不会产生效果
                        margin-bottom
                            -下外边距，设置一个正值，旗下边的元素回向下移动
                        margin-left
                            -左外边框，设置一个正值，元素会向右移动
                        
                        -margin也可以设置负值，如果是负值则元素会向相反的方向移动

                    -元素在页面中是按照自左向右的顺序排列的
                       所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                       而设置下和右外边距会移动其他元素
                    
                    -margin的简写属性
                        margin 可以同时设置四个方向的外边距，用法和padding一样

                        -margin会影响到盒子实际占用空间
             */
             margin-top: 100px;
             margin-left: 100px;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>